import React, { useEffect, useState, useReducer } from 'react'
import TitleBack from '../../components/TitleBack/TitleBack'
import { reqcartadd, reqgetgoodsinfo } from '../../http/api';
import { Link } from 'react-router-dom';
import "./Detail.less"
import { initState, reducer } from "../Login/user"
import { Toast } from 'antd-mobile';

export default function Detail(props) {
    const [goodsdetail, setgoodsdetail] = useState({})
    const [cartadd, setcartadd] = useState({
        uid: "",
        type: "",
        goodsid: "",
        num: 1
    })
    // 取出仓库数据
    const [state, dispatch] = useReducer(reducer, initState);
    useEffect(() => {
        // 取出地址栏id
        // 发请求
        reqgetgoodsinfo({ id: props.match.params.id }).then(res => {
            if (res.data.code === 200) {
                setgoodsdetail(res.data.list[0])
            }
        })
        // 将添加购物车需要的数据获取到
        setcartadd({
            uid: state.info.uid,
            type: props.match.params.type,
            goodsid: props.match.params.id,
            num: 1
        })
    }, [])
    function goshop() {
        reqcartadd(cartadd).then(res=>{
            if (res.data.list) {
                Toast.info(res.data.msg)
            }
        })
    }
    return (
        <div className="detail">
            <TitleBack title={"商品详情"}></TitleBack>
            <img src={goodsdetail.img} alt="" />
            <div className="banner-bd">
                <h4 className="banner-bd-jg">&yen;<span>{goodsdetail.price}</span><i>&yen;{goodsdetail.market_price}</i></h4>
                <p>{goodsdetail.goodsname}</p>
                <p>{goodsdetail.description}</p>
            </div>

            <footer className="footer">
                <ul className="box-ft">
                    <li>客服</li>
                    <li>店铺</li>
                    <li>收藏</li>
                </ul>
                <Link to="/index/shop"><div className="box-ft1">购物车</div></Link>
                <div className="box-ft2" onClick={() => goshop()}>加入购物车</div>
            </footer>
        </div>
    )
}
